<template >
    <div class="page_wrap">
        <div class="form_wrap">
            <van-row>
                <van-col span="24" style="font-size: 30px;text-align: center;margin: 0 0  30px 0;">{{ pageName }}</van-col>
            </van-row>
            <hr style="margin-top: -20px;">
            <van-row style="padding: 20px 15px;margin-top: -10px;" justify="space-between">
                <van-col span="11"><van-button plain type="primary" style="width:95%"
                        @click="changePageName('求职人员注册')">求职人员注册</van-button></van-col>
                <van-col span="11"><van-button plain type="primary" style="width:95%"
                        @click="changePageName('招聘人员注册')">招聘人员注册</van-button></van-col>
            </van-row>
            <van-form ref="registerFormRef">
                <van-cell-group inset>
                    <!-- 通过 pattern 进行正则校验 -->
                    <van-field v-model="formData.email" label="邮箱" name="emailPattern" placeholder="请输入邮箱"
                        :rules="[{ pattern: emailPattern, message: '请输入正确邮箱' }]" />
                    <van-field v-model="formData.captcha" center label="验证码" placeholder="请输入验证码"
                        :rules="[{ pattern: captchaPattern, message: '请输入6位数字验证码' }]">
                        <template #button>
                            <van-button size="small" type="primary" @click="handleSendCaptcha">发送验证码</van-button>
                        </template>
                    </van-field>
                    <!-- 通过 validator 进行函数校验 -->
                    <van-field v-model="formData.password" label="密码" name="passwordValidator" placeholder="请输入密码"
                        autocomplete="false" type="password"
                        :rules="[{ validator: passwordValidator, message: '密码应为字母，数字，特殊符号，两种及以上组合，8-16位字符串' }]" />
                    <van-field v-model="formData.confirmPassword" label="确认密码" name="passwordValidator" placeholder="请确认密码"
                        autocomplete="false" type="password"
                        :rules="[{ validator: confrimPasswordValidator, message: '两次输入密码不一致' }]" />
                </van-cell-group>
                <div style="margin-top: 20px;padding:0 15px; 0 15px">
                    <van-button round block type="primary" @click="handleRegister">注册</van-button>
                    <van-button round block plain style="margin-top: 10px;" @click="router.push('/login')">返回登录</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { showFailToast, showSuccessToast } from 'vant';
import router from '@/router';
import { register, sendCaptcha } from '@/utils/request';
import store from '@/store';
import { showNotify } from 'vant';
const registerFormRef = ref();
const pageName = ref('求职人员注册');
const formData = reactive({
    email: '',
    password: '',
    confirmPassword: '',
    captcha: '',
    roleName: '求职者'
})
// 校验函数返回 true 表示校验通过，false 表示不通过
const emailPattern = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
const captchaPattern = /[0-9]{6}/;
const passwordValidator = (val) => /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,20}$/.test(val);
const confrimPasswordValidator = (val) => {
    if (val == formData.password) {
        return true
    } else {
        return false
    }
}
function changePageName(name) {
    pageName.value = name
    if ('求职人员注册' == name) {
        formData.roleName = '求职者'
    } else {
        formData.roleName = '招聘者'
    }
}
function handleSendCaptcha() {
    sendCaptcha(formData.email, "注册").then(async res => {
        if (res.data.code == 200) {
            // 响应成功
            showNotify({ type: 'success', message: res.data.message || '验证码发送成功' });
        } else {
            // 响应失败
            showNotify({ type: 'warning', message: res.data.message || '服务器出错' });
        }
    })
}
function handleRegister() {
    registerFormRef.value?.validate(['emailPattern', 'passwordValidator']).then(() => {
        // 验证通过
        register(formData).then(res => {
            if (res.data.code == 200) {
                // 响应成功
                showSuccessToast(res.data.message || '注册成功')
                router.push("/login")
            } else {
                // 响应失败
                showFailToast(res.data.message || '服务器出错')
            }
        })
    }).catch((err) => {
        //验证失败
        showFailToast('请正确填写信息');
    })
}
</script>
<style scoped>
.page_wrap {
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    background-color: rgb(42, 116, 212);
    display: flex;
}

.form_wrap {
    margin: auto;
    background-color: aliceblue;
    padding: 10px;
    border-radius: 20px;
    width: 86%;
}

.forgetPassword {
    margin-top: -25px;
    line-height: 40px;
    font-size: 14px;
    color: rgb(11, 114, 231);
}
</style>